<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1000px"
      @closed="resetForm('form')"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="主题" prop="title">
            <el-input v-model.trim="form.title"></el-input>
          </el-form-item>
          <el-form-item label="主讲老师" prop="teacher">
            <el-input v-model.trim="form.teacher"></el-input>
          </el-form-item>
        </el-form>
        <div class="select-box">
          <div class="course-type">
            <div class="title">
              <h2>选择资源所在版块 ({{ courseType.length }})</h2>
            </div>
            <div class="content">
              <el-empty
                v-show="!courseType.length"
                description="暂无数据"
              ></el-empty>
              <ul v-loading="loading1">
                <li
                  :class="{ active: activeCourseType.id == item.id }"
                  v-for="item in courseType"
                  :key="item.id"
                  @click="handleCourseType(item)"
                >
                  <span
                    :class="
                      activeCourseType.id == item.id
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></span>
                  <p>{{ item.name }}</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="course-list">
            <div class="title">
              <h2>选择资源包 ({{ courseList.length }})</h2>
            </div>
            <div class="content" v-loading="loading2">
              <el-empty
                v-show="!courseList.length"
                description="暂无数据"
              ></el-empty>
              <ul>
                <li
                  :class="{ active: activeCourse.id == item.id }"
                  v-for="item in courseList"
                  :key="item.id"
                  @click="handleCourse(item)"
                >
                  <span
                    :class="
                      activeCourse.id == item.id
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></span>
                  <p>{{ item.title }}</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="knowledge-list">
            <div class="title">
              <h2>选择课次主题</h2>
            </div>
            <div class="content" v-loading="loading3">
              <div class="chapter-wrap">
                <el-empty
                  v-show="!chapterList.length"
                  description="暂无数据"
                ></el-empty>
                <el-collapse v-model="activeNames" v-show="chapterList.length">
                  <el-collapse-item
                    :name="item.id"
                    v-for="(item, idx) in chapterList"
                    :key="item.id"
                  >
                    <template slot="title">
                      <p style="text-indent: 10px"
                        >第{{ ++idx }}章 {{ item.name }}</p
                      >
                    </template>
                    <div class="">
                      <p v-show="item.childList.length == 0" class="empty"
                        >暂无数据</p
                      >
                      <ul>
                        <li
                          :class="{ active: activeChapter.id == v.id }"
                          v-for="(v, i) in item.childList"
                          :key="v.id"
                          @click="handleChapter(v)"
                        >
                          <p>第{{ ++i }}节 {{ v.name }}</p>
                        </li>
                      </ul>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  eduTeachingCourseAdd,
  eduTeachingCourseUpdate,
} from '@/api/admin/teach/eduTeachingCourse.js'
import { sysCourseQuery } from '@/api/admin/courseLibrary/sysCourse.js'
import { sysCourseChapterQuery } from '@/api/admin/courseLibrary/sysCourseChapter.js'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      activeNames: [],
      title: '新增',
      dialogVisible: false,
      loading1: false,
      loading2: false,
      loading3: false,
      addOrEdit: 1,
      form: {
        chapterId: '', //节id
        courseId: '', //课程id
        courseType: '', //课程板块
        eduTeachingId: '', //班次id
        knowledgeId: '', //知识点id
        status: '1', //open,close
        teacher: '', //主讲老师
        title: '', //主题
      },
      rules: {
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        teacher: [{ required: true, message: '请输入编码', trigger: 'blur' }],
      },
      row: {},
      courseType: [],
      activeCourseType: {},
      courseList: [],
      activeCourse: {},
      chapterList: [],
      activeChapter: {},
    }
  },
  mounted() {
    Bus.$on('showDialogCourseAdd', (row) => {
      if (row) {
        this.row = row
        this.handleAddOrEdit(2)
      } else {
        this.handleAddOrEdit(1)
      }
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogCourseAdd')
  },
  methods: {
    //显示弹窗
    handleAddOrEdit(type) {
      this.form = this.$options.data().form
      let menuData = this.$store.getters.menuData
      let idArr = ['692', '712', '60']
      this.courseType = []
      menuData.forEach((item) => {
        if (idArr.includes(item.id)) {
          this.courseType.push(...item.childList)
        }
      })
      this.courseType.forEach((item, idx) => {
        this.$set(item, 'courseType', ++idx)
      })
      this.form.eduTeachingId = this.row.id
      this.form.teacher = this.$store.getters.username
      this.dialogVisible = true
    },
    handleCourseType(item) {
      this.courseList = []
      this.activeCourse = {}
      this.chapterList = []
      this.activeChapter = {}
      this.activeCourseType = item
      this.form.courseType = item.courseType
      this.getList(item.courseType)
    },
    // 查询课程
    getList(courseType) {
      this.loading2 = true
      let listQuery = {
        courseType: courseType || 1,
        page: 1,
        limit: 99,
        // sourceType: '1',
      }
      sysCourseQuery(listQuery).then((res) => {
        this.courseList = res.data.data
        this.loading2 = false
      })
    },
    handleCourse(item) {
      this.chapterList = []
      this.activeCourse = item
      this.form.courseId = item.id
      this.getChapterList(item.id)
    },
    // 查询章节
    getChapterList(courseId) {
      this.loading3 = true
      let listQuery = {
        pid: 0,
        page: 1,
        limit: 99,
        courseId, //课程ID
      }
      sysCourseChapterQuery(listQuery).then((res) => {
        this.chapterList = res.data.data
        this.loading3 = false
      })
    },
    // 点击主题
    handleChapter(item) {
      this.activeChapter = item
      this.form.title = item.name
      this.form.chapterId = item.id
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.add()
          //   this.addOrEdit == 1 ? this.add() : this.edit()
        }
      })
    },
    //新增
    add() {
      eduTeachingCourseAdd(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshClassroomList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //编辑
    edit() {
      eduTeachingCourseUpdate(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshClassroomList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      this.form.name = ''
      this.form.code = ''
    },
  },
}
</script>
<style scoped lang="scss">
.select-box {
  position: relative;
  min-height: 400px;
  border: 1px solid #eee;
  padding: 10px;
  .knowledge-list,
  .course-list,
  .course-type {
    float: left;
    width: 30%;
    height: 400px;
    background: #f5f5f5;
    box-sizing: border-box;
    .title {
      height: 40px;
      line-height: 40px;
      width: 100%;
      text-indent: 10px;
      background: var(--colorH1);
      h2 {
        font-size: 15px;
        color: #fff;
      }
    }
    .content {
      box-sizing: border-box;
      padding: 10px;
      height: 360px;
      overflow: hidden;
      ul {
        height: 340px;
        overflow: auto;
        li {
          position: relative;
          height: 36px;
          line-height: 36px;
          margin-bottom: 5px;
          border-radius: 3px;
          background: #fff;
          cursor: pointer;
          &.active {
            span {
              color: var(--colorH1);
            }
            p {
              color: var(--colorH1);
            }
          }
          span {
            position: absolute;
            left: 10px;
            top: 10px;
            color: #666;
            font-size: 16px;
          }
          p {
            text-indent: 32px;
            color: #333;
            font-size: 14px;
          }
        }
      }
      .empty {
        color: #999;
        text-indent: 20px;
      }
    }
  }
  .course-list {
    width: 33%;

    margin: 0 2%;
  }
  .knowledge-list {
    width: 33%;
    .content {
      ul {
        height: auto;
        li {
          margin-bottom: 0;
          height: 28px;
          line-height: 28px;
        }
      }
      .chapter-wrap {
        height: 340px;
        overflow: auto;
      }
    }
  }
}
</style>